<template>
  <div>
    <h1 align="center">多对一模块</h1>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column prop="id" label="订单序号" align="center" width="100"/>
      <el-table-column prop="orderTime" label="订单时间" align="center" width="200"/>
      <el-table-column prop="total" label="总金额" align="center" width="200"/>
      <el-table-column label="订单用户信息" align="center" width="300">
        <template slot-scope="scope">
          <div v-if="scope.row.user">
<!--            user对象用点点，集合用for循环-->
            <el-tag size="medium" style="margin-right: 5px;">
              用户id : {{ scope.row.user.id }},
              用户名: {{ scope.row.user.username }},
              出生日期: {{ scope.row.user.birthday }}
            </el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'B',
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      axios.get('http://127.0.0.1:9090/order/orderList')
        .then(res => {
          if (res.data.code === 1) {
            this.tableData = res.data.data
            console.log("------", JSON.stringify(res.data.data))
          } else {
            console.error('Failed to fetch user data:', res.data.msg)
          }
        })
        .catch(error => {
          console.error('Error fetching user data:', error)
        })
    }
  }
}
</script>

<style>
/* 你的样式 */
</style>
